<template>
  <div>
    <div class="header">
      <div class="header_son">关键指标-总数</div>
      <div class="header_son1">
        <div
          class="header_main"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <div class="header_main1">
            <span>{{ item.name }}</span>
            <h1>{{ item.count }}元</h1>
          </div>
          <div class="header_main2">
            <div>
              <span>今日 新增 {{ item.nowDay }} 元</span>
              <div class="box">
                <img
                  v-if="item.nowDayPercent >= 0"
                  src="../../assets/images/up.png"
                />
                <img v-else src="../../assets/images/down.png" />
                <b>{{ Math.abs(item.nowDayPercent) }}%</b>
              </div>
            </div>
            <div>
              <span>本周 新增 {{ item.week }} 元</span>
              <div class="box">
                <img
                  v-if="item.weekPercent >= 0"
                  src="../../assets/images/up.png"
                />
                <img v-else src="../../assets/images/down.png" />
                <b class="box">{{ Math.abs(item.weekPercent) }}%</b>
              </div>
            </div>
            <div>
              <span>本月 新增 {{ item.month }} 元</span>
              <div class="box">
                <img
                  v-if="item.monthPercent >= 0"
                  src="../../assets/images/up.png"
                />
                <img v-else src="../../assets/images/down.png" />
                <b class="box">{{ Math.abs(item.monthPercent) }}%</b>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="pie">
      <div class="header_son">占比对比</div>
      <div class="pie_con">
        <div id="chart"></div>
      </div>
    </div>
    <div class="main">
      <div class="main_son">
        时间
        <div class="times">
          <el-date-picker
            @change="timers"
            :disabled="disabled"
            v-model="kaoTime"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </div>
        <el-button @click="week">周</el-button>
        <el-button @click="mouth">月</el-button>
      </div>
      <div id="users"></div>

        <el-table
          style="width: 100%"
          border
          :data="tableDatas"
          :header-cell-style="{ background: '#DCDCDC', color: '#222' }"
        >
          <el-table-column width="120" prop="dateString" label="时间"></el-table-column>
          <template v-for="(item, index) in tableHeader">
            <el-table-column
              :prop="item.value"
              :label="item.keyName"
              :key="index"
            />
          </template>
        </el-table>

        <div style="clear: both;"></div>

    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import https from "../../plugins/https.js"
export default {
  data() {
    return {
      kaoTime: [],
      listQuery: {
        startDate: "2020-09-14",
        endDate: "2020-09-20"
      },
      form: {
        startDate: "",
        endDate: ""
      },
      pie: [],
      tableData: [],
      tableDatas: [],
      tableHeader: [],
      series: [],
      data: [],
      lanya: ["20000", "23000", "28000", "50000", "36000", "34000", "22000"],
      shou: ["100000", "56000", "78000", "95300", "112200", "134000", "85000"],
      dian: [
        "105000",
        "223000",
        "115000",
        "99000",
        "137000",
        "120000",
        "98500"
      ],
      zhi: ["38500", "43200", "76000", "53000", "21100", "32200", "41800"]
    };
  },
  created() {
    this.first();
    this.pies();
    this.datas(7);
    this.echarts();
  },
  mounted() {
    // 柱状图
    this.barChart(this.data, this.lanya, this.shou, this.dian, this.zhi);
    // 饼状图
    this.pieChart();
  },
  methods: {
    // 关键指标
    first() {
      var _this = this;
        https.dataPayStatisticsCount({}).then(function(d) {
          console.log(d);
          if (d.data.code == "0000") {
            _this.tableData = d.data.data;
          }
        })
        .catch();
    },
    // 饼图
    pies() {
      var _this = this;
        https.dataPayContrastCount( _this.form).then(res => {
          this.pie = res.data.data;
          this.pieChart(this.pie);
        });
    },
    // 折线图
    echarts() {
      var _this = this;
        https.dataTradeStatistics(_this.form).then(res => {
          console.log(res.data);
          this.data = res.data.dateList;
          this.series = res.data.list;
          this.tableHeader = res.data.tableHeader;
          this.tableDatas = res.data.TableTradeStatistics;
          this.barChart(this.data, this.series);
        });
    },
    //折线图
    barChart(data, series) {
      let dom = document.getElementById("users");
      let myChart = echarts.init(dom);
      let option = {

        tooltip: {
          trigger: "axis",
          show: true
        },
        grid: {
          left: 60,
          right: 30,
          top: 40,
          bottom: 30
        },
        title: {
          textStyle: {
            fontWeight: "100",
            color: "#001751",
            fontSize: 12
          }
        },
        xAxis: {
          type: "category",
          data: data
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "rgba(0, 0, 0, 0.9)",
              width: 1
            }
          }
        },
        series: series
      };
      myChart.setOption(option, true);
    },
    // 饼图
    pieChart(pie) {
      let dom = document.getElementById("chart");
      let yChart = echarts.init(dom);
      let option = {
        title: {
          
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} <br/>交易总量： {c}元<br/> 总量占比：({d}%)"
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: pie,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      yChart.setOption(option, true);
    },
    // 获取时间
    datas(num) {
      var date = new Date();
      console.log(date);
      var list = this.getDateRange(date, num, true);
      this.form.endDate = list[1];
      this.form.startDate = list[0];
      this.kaoTime = list;
      console.log(list);
    },
    // 日、月补0
    formateDate(time) {
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      if (month < 10) {
        month = "0" + month;
      }

      if (day < 10) {
        day = "0" + day;
      }

      return year + "-" + month + "-" + day + "";
    },
    // 获取时间区间
    getDateRange(dateNow, intervalDays, bolPastTime) {
      let oneDayTime = 24 * 60 * 60 * 1000;
      let list = [];
      let lastDay;
      let lastDays;
      if (bolPastTime == true) {
        lastDays = new Date(dateNow.getTime() - 1 * oneDayTime);
        lastDay = new Date(dateNow.getTime() - intervalDays * oneDayTime);
        list.push(this.formateDate(lastDay));
        list.push(this.formateDate(lastDays));
      } else {
        lastDay = new Date(dateNow.getTime() + intervalDays * oneDayTime);
        list.push(this.formateDate(dateNow));
        list.push(this.formateDate(lastDay));
      }
      return list;
    },
    // 点击周
    week() {
      this.datas(7);
      this.echarts();
    },
    // 点击月
    mouth() {
      this.datas(30);
      this.echarts();
    },
    // 选择30天之内的时间
    getD(starDate, endDate) {
      var sDate = new Date(starDate).getTime();
      var eDate = new Date(endDate).getTime();
      var thisMothDays = 1000 * 3600 * 24 * 30;

      if (eDate - sDate < thisMothDays) {
        return true;
      } else {
        return false;
      }
    },
    // 选择时间
    timers(val) {
      console.log(val);
      this.form.startDate = val[0];
      this.form.endDate = val[1];
      this.form.timeType = "";
      if (
        this.form.startDate != "" &&
        this.form.endDate != "" &&
        this.getD(this.form.startDate, this.form.endDate) == true
      ) {
        this.echarts();
      } else {
        return layer.open({
          content: "最低可查30天内的数据",
          skin: "msg",
          time:  2 //2秒后自动关闭
        });
      }
    }
  }
};
</script>
<style scoped>
.header {
  margin: 2% 2% 0;
  /* margin-top: 2%; */
  width: 96%;
  border: 1px solid #000;
  min-height: 10px;
}
.header_son {
  width: 100%;
  height: 40px;
  background: #ebe8e8;
  font-size: 16px;
  line-height: 40px;
  padding-left: 20px;
}
.header_son1 {
  width: auto;
  height: 200px;
  white-space: nowrap;
  overflow-x: auto;
}
.header_main {
  width: 33.3%;
  height: 100%;
  padding: 30px 0 30px;
  display: inline-block;
}
.header_main1 {
  /* padding-top: 20px; */
  width: 100%;
  height: 80px;
  border-right: 1px solid #ccc;
  text-align: center;
}
.header_main2 {
  /* padding-top: 20px; */
  width: 100%;
  height: 60px;
  /* border-right: 1px solid #ccc; */
  text-align: center;
}
.header_main2 > span {
  display: block;
}
.con > span {
  display: block;
}
h1 {
  margin-top: 20px;
  font-size: 18px;
}
.main {
  margin-top: 20px;
  margin: 2% 2% 0;
  width: 96%;
}
.main_son {
  width: 100%;
  height: 50px;
  background: #ebe8e8;
  font-size: 16px;
  line-height: 40px;
  padding-left: 20px;
}
.times {
  width: 313px;
  display: inline-block;
  line-height: 100%;
  padding: 6px;
}
/* /deep/ .el-input__inner {
  height: 28px !important;
} */
#users {
  height: 300px;
  padding-top: 20px;
}
.table {
  margin-top: 40px;
}
.pie {
  margin-top: 20px;
  margin: 2% 2% 0;
  width: 96%;
}
.pie_con {
  display: flex;
}
#chart {
  height: 300px;
  padding-top: 20px;
  width: 100%;
}
.con {
  width: 30%;
  height: 300px;
  text-align: center;
  padding-top: 100px;
}
.el-button {
  height: 38px;
  /* line-height: 28px; */

  padding: 0 20px;
}
img {
  width: 18px;
  height: 16px;
  font-weight: bold;
  padding-bottom: 3px;
}
.box {
  display: inline-block;
}
b {
  margin-left: -6px;
  font-weight: 100;
}
/deep/ .el-table__body-wrapper{
  overflow-x: auto !important;
  overflow-y: hidden;
}
/deep/ .el-table__header-wrapper{
  overflow-x: hidden !important;
}
</style>
